import * as Three from 'three';

import { Value2Color } from './dealPropertyValue';



export function CreateImayerFromData(imgSize:number,valueData:number[]){
    
    // 计算最大值和最小值
    const maxValue = Math.max(...valueData);
    const minValue = Math.min(...valueData);
    console.log(`valueData data, max:${maxValue},min:${minValue}`);


    // 图像的尺寸为 imgSize * imgSize
    const size = imgSize;
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;

    const ctx = canvas.getContext('2d');

    const imageData = ctx?.createImageData(size, size); // 创建一个size*size的图像数据
    // console.log("imageData length:",imageData?.data.length); size*size*4 的数组

    // TODO:
    // 假设顶点的数量小size*size，所以我们按顺序将valueData.length个温度值映射到128x128的图像
    // 将数据映射到图像像素上
    for (let i = 0; i < valueData.length; i++) {
        const value = valueData[i]; // 获取顶点中记录的值

        // 计算这个值应该映射到图像的哪个像素位置
        const x = i % size; // 计算x坐标
        const y = Math.floor(i / size); // 计算y坐标

        const index = (y * size + x) * 4; // 获取像素在图像数据中的位置
        


        let colorValue = Value2Color(value,minValue,maxValue);
        // console.log("colorValue:", colorValue);

        // 将值映射到像素的RGB通道上，这里假设值存储在灰度图像中（r、g、b均存储相同值）
        imageData.data[index] = colorValue[0];     // R
        imageData.data[index + 1] = colorValue[1]; // G
        imageData.data[index + 2] = colorValue[2]; // B
        imageData.data[index + 3] = 255;        // A
    }

    // console.log("ImageData:",imageData);

    // 将图像数据绘制到canvas上
    ctx?.putImageData(imageData, 0, 0);

    // NOTE:纹理图保存至本地
    // Canvas2ImagePNG(canvas,'temp_image.png');

    // 创建纹理
    const texture = new Three.CanvasTexture(canvas);

    return texture;

    function Canvas2ImagePNG(canvas:HTMLCanvasElement,fileName:string){
        // 将canvas内容转换为data URL
        const dataURL = canvas.toDataURL('image/png');
        // 创建一个链接元素，并设置其href属性为data URL
        const link = document.createElement('a');
        link.href = dataURL;
        // 设置下载的文件名
        link.download = fileName;
        // 触发点击事件以下载文件
        document.body.appendChild(link);
        link.click();

        document.body.removeChild(link);
    }

}


export function CalculateUVArray(imgSize:number, valueCount:number){
    let uvs = []; // 存储每个顶点的 UV 坐标

    for (let i = 0; i < valueCount; i++) {
        const x = i % imgSize; 
        const y = Math.floor(i / imgSize); 

        // 像素中心对齐：通过加 0.5 保证采样的是像素的中心，而不是边界
        const u = (x + 0.5) / imgSize; 
        const v = 1 - (y + 0.5) / imgSize; 
        
        // NOTE:存入 UV 坐标,用于测试
        // uvs.push({ u, v });
        uvs.push(u,v);
    }
    // console.log("uvs:", uvs);

    return uvs;
}